For many years we used content above the fold as a gateway for users to access pretty much anywhere on our sites. We would fill these 600 or so pixels of valuable space with all the important sections of our site we wanted our users to know about (we were particularly guilty of this on homepages, as Rand discussed in this Whiteboard Friday).
However, the arrival of smartphones and tablets has forever changed the way people consume information and navigate around the web. Smartphones taught users how to scroll and swipe, and as such have reinvented the way webpages are designed. So, what about the fold? How has this changed in this multi-screen world?
Space above the fold is still hugely important, but instead of just sharing everything there, the fear centers around the idea that users may not want to scroll. Instead, we now need to narrow down our focus, using space above the fold to share our main ideas that will make people want to read the rest of the page.
History of the fold
The term “above the fold” originates from the world of newspapers; papers are generally shown to customers folded in half, therefore only the top half of the page is visible. Editors would use this space to grab attention using important stories, powerful headlines and strong imagery to encourage users to buy the paper.
On a webpage, the fold is the area of a page displayed to the user without them having to scroll. Based on a 1366×768 pixel screen resolution (a little more on this choice later), the area highlighted in red is generally how content is presented to users on a landing page (i.e. above the fold)
Is space above the fold still valuable in 2014?
At the end of 2013, Peep Laja spoke at SearchLove about the Principles of Persuasive Web Design. He had observed that despite it being 2013 (now 2014) and us living in a much more scroll-oriented world, content placed above the fold was still grabbing 80% of our attention.
This continues to make above-the-fold space highly valuable to capture a user’s attention. The main difference today is that users no longer have the patience they once had. This is due to the high volume of content users have access to, making earning their attention increasingly competitive.
Therefore, this space should no longer be filled with clutter and overwhelming amounts of information. Instead, above the fold content needs to contain a strong value proposition that explains to the user exactly what the page can offer.
With so many devices, how can you possibly design for above the fold?
The multi-screen world we now live in has changed the face of above-the-fold space. With such a range of devices and responsive designs the fold will appear in different places dependent upon numerous factors (such as screen resolution, thickness of the user’s toolbar, and whether the page is zoomed).
How do we design for this? There is no one-size-fits-all solution to this problem, but what we can do is ensure our important content is towards the top of the page and is optimised to serve the majority of our users.
To find out which screen resolutions the majority of your users use on your site, complete the following steps:
1.Open Google Analytics
2.In the “Audience” tab, view “Technology” and select “Browser & OS”
3.Choose “Screen Resolution”
How to view your site in different resolutions
To see where the fold is for various screen dimensions, use the “Inspect Element” feature in Chrome to override your own screen resolution.
1. Right-click anywhere on the page in Chrome, and select “Inspect Element”
2. Click on the settings gear in the bottom-right corner of the screen
3. Select “Overrides” and check the “Enable” box. Check “Device metrics” and input the screen resolution you would like to view the site at. Note that closing the override window will return your browser to its default resolution.
Designing for beyond the fold
Okay, so we know that space above the fold is still incredibly important for engaging user attention. What about the rest of our beautifully created content? A study by Clicktale shows that if a page has a scroll bar it will be used by 76% of users to at least some extent. 22% will scroll to the bottom of the page. So, as pointed out by Usability Expert Jakob Nielsen, space above the fold still grabs the majority of attention and people do scroll, but we should make sure that we are designing to encourage that scrolling.
While mobile devices have developed scrolling as natural user behavior we have to ensure that our page layouts are designed to showcase all our content. So what should the fold line look like? Ideally, we want to make content on the fold line draw the users eyes down the page.
Three ways in which we can encourage scrolling
1. Staggered content columns
By making content different lengths in each column we prevent the issue of having empty space across the width of the page, making it seem like the page has ended. One paragraph or image is always broken by the fold, encouraging the user to scroll down to see more information. This is a style often used by newspaper websites such as the New York Times and the BBC.
2. Page trails
Using a footpath that walks users through the page is a great way to encourage users to scroll. The fold simply dissects the path, which the user will naturally continue to follow. A great example of this in action is the Guide to Wordpress by Simply Business.
3. Sometimes you just have to tell them
Sometimes rather than trying to use subtle visual cues to guide users down the page it can be beneficial to simply tell the user there is more content for them to see. This is the approach Put Things Off uses to introduce further features of their mobile app.
Key takeaways
- The fold still matters. While space above the fold used to serve as a portal to explore all the sections of a site, its purpose is to now grab attention and introduce the user to your brand/product.
- We live in a multi-screen world and scrolling is now habitual. If we are building pages that require scrolling we need to ensure we encourage this behaviour through visual prompts and remind the user there is deeper content below the fold.
- Continue to monitor user behaviour particularly in relation to the most commonly used screen resolutions in order to ensure valuable content remains above the fold.
